import Card from "@/components/demo/Card";
import { VIEW_PADDING_TOP } from "@/constants";
import { defineComponent } from "vue";
import Elements from "./Elements";
import IncrButton from "./IncrButton";
import styles from "./index.module.css";

/**
 * vue router 依赖路由页面的生命周期钩子，所以此页面不能是函数式组件
 */
const HelloWorldView = defineComponent({
  setup() {
    return () => (
      <div style={{ paddingTop: VIEW_PADDING_TOP }}>
        <h1>HelloWorldView</h1>
        <div class="card">
          <IncrButton />
          <p>
            Edit
            <code>components/HelloWorld.tsx</code> to test HMR
          </p>
        </div>

        <Card>
          {{
            title: () => "jaja",
            default: () => (
              <>
                <p>
                  Check out
                  <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" rel="noreferrer">
                    create-vue
                  </a>
                  , the official Vue + Vite starter
                </p>
                <p>
                  Learn more about IDE Support for Vue in the
                  <a
                    href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
                    target="_blank"
                    rel="noreferrer"
                  >
                    Vue Docs Scaling up Guide
                  </a>
                  .
                </p>
                <p class={styles["read-the-docs"]}>Click on the Vite and Vue logos to learn more</p>
              </>
            ),
          }}
        </Card>
        <Elements />
      </div>
    );
  },
});

export default HelloWorldView;
